<template>
  <nav class="j-sub-nav" @click="tabSelect" ref="jsubnav">
    <router-link class="nav-item" v-for="(item, index) in items"  :key="item.name" tag="li"
    :title="item.exit?'':'将在二期开发'"  :disabled="!item.exit" :dateset="item.exit?'true':'false'"
    :to="{name:item.path,query:{entid:entid?entid:0,entname:entname}}" :data-index="index">
    <!-- ,focusStatus:focusStatus -->
    {{item.name}}
    <span v-show="item.riskCount>0"></span>
    </router-link>
  </nav>
</template>
<script>
import { entdetail as api } from '../api'
export default {
  name: 'jSubNav',
  props: {
    items: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      entid: 0,
      entname: '',
      isEng: 0,
      wrapTop:[],
      scrollTop:[],
      riskNum: {
        baseInfo: '暂无',
        compliance: 0,
        management: 0,
        sentiment: 0,
        specialWord: 0,
        relation: 0,
        other: 0,
        statusChange: '暂无'
      },
      focusStatus:0,
      flag: true,
      warningValues: []
    }
  },
  watch: {
  },
  mounted() {
    this.entname = this.$route.query.entname
    // this.focusStatus = this.$route.query.focusStatus
    this.getDataCount()
    if (this.$route.path === '/entdetail/baseinfo' || this.$route.path === '/clibdetail/baseinfoa') {
      document
        .querySelector('.j-sub-nav .nav-item')
        .classList.add('router-link-exact-active', 'selected')
    }
  },
  methods: {
    tabSelect(e) {
      if (e.target.nodeName.toLowerCase() === 'li') {
        var alldom = document.querySelectorAll('.j-sub-nav .nav-item')
        alldom.forEach(item => {
          item.classList.remove('router-link-exact-active', 'selected')
        })
        alldom[parseInt(e.target.dataset.index)].classList.add('router-link-exact-active', 'selected')
      }
    },
    stringToJson(string) {
      let arr = string.split(':')
      let obj = {}
      obj[arr[0]] = +arr[1]
      return obj
    },
    getDataCount() {
      // let nameData = this.entname
      // nameData = nameData.replace('(', '（')
      // nameData = nameData.replace(')', '）')
      // if (nameData !== this.entname) {
      //   this.isEng = 1
      // }
      // console.log(nameData, this.isEng)
      // // 判断是否英文
      let param = {
        entName: this.entname
      }
      if (this.$route.path.split('#')[0].split('/')[1] === 'entdetail') {
        // 经营风险
        // console.log(param)
        api.getcountRiskOperation(param).then(rtn => {
          this.items.forEach(item => {
            if (item.name === '经营风险') {
              item.riskCount = rtn.data.totalCount
            }
          })
        })
        // 舆情风险
        api.getriskOpcountRiskOpinion(param).then(rtn => {
          this.items.forEach(item => {
            if (item.name === '舆情风险') {
              item.riskCount = rtn.data.totalCount
            }
          })
        })
        // 关联风险
        api.getriskRelationOperation(param).then(rtn => {
          this.items.forEach(item => {
            if (item.name === '关联风险') {
              item.riskCount = rtn.data.totalCount
            }
          })
        })
        // 传播风险
        api.getriskPropagateRiskOperation(param).then(rtn => {
          this.items.forEach(item => {
            if (item.name === '传播风险') {
              item.riskCount = rtn.data.totalCount
            }
          })
        })
      }
    }
    // getDataCount() {
    //   let param = {}
    //   api.getDataCount(param).then(rtn => {})
    // }
  }
}
</script>
<style lang="scss" scoped>
.j-sub-nav {
  max-width: 1360px;
  background-color: #ffffff;
  // border-bottom: 1px solid #fff;
  display: table;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
  border-radius: 5px;
  margin-top: 20px;
  margin-bottom: 20px;
  height: 58px;
  width: 100%;
  line-height: 55px;
  position: -webkit-sticky;
  position: sticky;
  top: 69px;
  z-index: 2;
  .nav-item {
    display: inline-block;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    color: #666666;
    padding: 0px 30px;
    border-bottom: solid 4px transparent;
    position: relative;
    cursor: pointer;
    span {
      background: #e92322;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
      position: absolute;
      top: 24px;
      right: 20px;
    }
    &:hover,
    &.selected {
      color: #1a75ca;
      border-bottom-color: #1a75ca;
      background-color: rgba(26, 117, 202, 0.1);
    }
    &.router-link-active {
      color: #1a75ca;
      border-bottom-color: #1a75ca;
      background-color: rgba(26, 117, 202, 0.1);
    }
  }
}
.floatbar{
  position:fixed;
  left:0;
  right:0;
  margin:0 auto;
  top:68px;
  background: #fff;
  z-index: 4;
}
</style>



// WEBPACK FOOTER //
// src/components/jSubNav.vue